<template>
  <el-form ref="ruleFormRef" style="width: 600px;margin: auto;" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
  
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="form.userName" />
      </el-form-item>

      <el-form-item label="密码" prop="userPwd">
        <el-input v-model="form.userPwd" show-password />
      </el-form-item>
  
      <el-form-item label="性别">
        <el-radio-group v-model="form.gender">
        <el-radio :value="true" size="large">男</el-radio>
        <el-radio :value="false" size="large">女</el-radio>
      </el-radio-group>
      </el-form-item>
  
      <el-form-item label="所在部门" prop="departmentId">
      <el-select v-model="form.departmentId" placeholder="请选择部门">
        <el-option label="IT信息部" :value="1" />
        <el-option label="人力资源部" :value="2" />
        <el-option label="财务部" :value="3" />
        <el-option label="销售部" :value="4" />
        <el-option label="行政部" :value="5" />
      </el-select>
    </el-form-item>

      <el-form-item label="所在地址">
        <el-select v-model="form.provinceId" placeholder="请选择省份" @change="getCity">
          <el-option label="请选择省份" value=" " />
          <el-option v-for="item in provinceData" :key="item.provinceId" :label="item.provinceName" :value="item.provinceId" />
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="form.cityId" placeholder="请选择城市" @change="getCounty">
          <el-option label="请选择市" value=" " />
          <el-option v-for="item in cityData" :key="item.cityId" :label="item.cityName" :value="item.cityId" />
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="form.countyId" placeholder="请选择县">
          <el-option label="请选择县" value=" " />
          <el-option v-for="item in countyData" :key="item.countyId" :label="item.countyName" :value="item.countyId" />
        </el-select>
      </el-form-item>
  
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.address" />
      </el-form-item>
  
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确定修改</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted, computed } from 'vue'
  import axios from 'axios';
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute();
  const router = useRouter();
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()

  onMounted(() => {
    getProvince()
    getCity()
    getCounty()
    getUserInfo()
  })
  const form: any = reactive({
    userId:route.query.userId,
    userName: '',
    userPwd:'',
    gender: '',
    departmentId:'',
    provinceId: '',
    cityId: '',
    countyId: '',
    address: '',
  })
  
  //校验规则
  const rules = reactive<FormRules>({
    userName: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    address: [
      { required: true, message: '请输入详细地址', trigger: 'blur' },
    ],
  })
  
  //省
  const provinceData:any=ref([]) 
  const getProvince = () => {
    axios.get('/api/ProvinceManagement/GetProvinces').then(res => {
      //console.log(res);
      provinceData.value = res.data.data;
    }).catch(err => {
      console.log(err);
  
    })
  }
    
  //市
  const cityData:any=ref([]) 
  const getCity = () => {
    //清空
    form.cityId = '';
    form.countyId = '';
  
    axios.get('/api/CityManagement/GetCities', {
      params: {
        provinceId: form.provinceId || null
      }
    }).then(res => {
      //console.log(res);
      cityData.value = res.data.data;
    }).catch(err => {
      console.log(err);
  
    })
  }
  
  //县
  const countyData: any = ref([]) 
  const getCounty = () => {
    //清空
    form.countyId = '';
    axios.get('/api/CountyManagement/GetCounties', {
      params: {
        cityId: form.cityId || null
      }
    }).then(res => {
      //console.log(res);
      countyData.value = res.data.data;
    }).catch(err => {
      console.log(err);
  
    })
  }  

  const userInfoData:any=ref([])
   //反填用户信息
  const getUserInfo = () => {
    let backInfo= {
      userId:form.userId
    }
    axios.post('/api/UserManagemement/Find',backInfo).then(res=>{
      console.log(res);
      userInfoData.value = res.data.data;
      form.userName = res.data.data.userName,
      form.userPwd = res.data.data.userPwd;
      form.gender = res.data.data.gender;
      form.departmentId = res.data.departmentId;
      form.provinceId = res.data.data.provinceId
      getCity()
      form.cityId = res.data.data.cityId
      getCounty()
      form.countyId=res.data.data.countyId
      form.address = res.data.data.address
      form.departmentId=res.data.data.departmentId
    }).catch(err=>{
      console.log(err);
      
    })    
  }
  
    //确定修改
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        let userData: any = {
          userId:form.userId,
          userName: form.userName,
          userPwd: form.userPwd,
          gender:form.gender,
          departmentId:form.departmentId,
          provinceId: form.provinceId,
          cityId: form.cityId,
          countyId: form.countyId,
          address: form.address,
        }
        axios.put('/api/UserManagemement/Update', userData).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            ElMessage.success("修改成功!")
            router.push({
              'name':'UserInfoList'
            })
          // } else if (res.data.code == -2) {
          //   ElMessage.error("该用户名已存在.请重新输入")
          //   return
          } else {
            ElMessage.error("修改失败!")
            return
          }
        }).catch(err => {
          console.log(err);
  
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  </script>
  
  <style scoped>
  
  </style>